<template>
  <div class="header">
    <div class="header_con">
      <img src="~/assets/img/logo.png" alt="" />
      <ul>
        <li>
          <nuxt-link  to="/"> 首页 </nuxt-link>
        </li>
        <li>
          <router-link to="/movies/moviesList"> 影院新动向 </router-link>
        </li>
        <li><router-link to="/"> 音乐播放中心 </router-link></li>
        <li><router-link to="/"> 小说阅读与创作中心 </router-link></li>
        <li><router-link to="/"> 学习文档交流社区 </router-link></li>
        <li><router-link to="/"> 优秀项目展示社区 </router-link></li>
        <li>
          <router-link to="/"> 其他 </router-link>
        </li>
      </ul>
      <div class="right">
        <el-button size="small" v-if="username" >
          {{username}}
        </el-button>
        <el-button size="small"  @click="logout">退出</el-button>
      </div>
    </div>
  </div>
</template> 

<script>
export default {
  data() {
    return {
      username:''
    };
  },
  mounted() {

    this.username=this.$store.state.userdata==null?'':this.$store.state.userdata.username

  },
  methods: {
    //
    go(){
      console.log("jjj")
    },

    //退出
    logout() {
      this.$cookies.remove("token");
      this.$store.commit("settoken", "");
      this.$store.commit("setuserdata", null);
      this.$message.success("退出成功");
      this.$router.replace("/login");
    },
  },
};
</script>

<style scoped lang="less">
div.header {
  width: 100vw;
  display: flex;
  justify-content: center;
  max-height: 74px;
  background-color: rgba(0, 0, 0, 0.1);
  .header_con {
    width: 1200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    img {
      height: 64px;
    }
    ul {
      display: flex;
      height: 74px;
      align-items: center;
      li {
        margin-left: 20px;
        a {
          text-decoration: none;
          color: #fff;
          font-size: 14px;
          &:hover{
            color: #f368e0;
          }
        }
        &:nth-of-type(1) {
          margin-left: 0;
        }
      }
    }

    .right{
      .el-button{
        color: #198ede;
        font-size: 14px;
      }
    }
  }
}
</style>>
